<template>
    <div class="commodity-nav">
       <div class="container clearfix">
        <ul>
            <li  v-for="i in titleList" :class="{'active':i.path === path}" :key="i.id" @click="fun(i.path)">
                {{i.name}}
                <span v-if="i.num">({{i.num}})</span>
            </li>
        </ul>
       </div>
    </div>
</template>

<script>
    export default {
        name: "CommodityNav",
        props:['titleList'],
        methods: {
            fun (path) {
                this.$router.push({path:path})
            }
        },

        computed: {
            path () {
                // console.log(this.$route.path);
                // console.log(this.titleList)
                return this.$route.path
            }
        },
    }
</script>

<style scoped lang="less">
    @import "../../../style/style";
    .commodity-nav{
        height: 46px;
        background-color:#ff97a8;
        ul{
            .active{
                background-color:#FE5371;
            }
            li{
                float: left;
                color: white;
                width: 130px;
                height: 46px;
                text-align: center;
                line-height: 46px;
                font-size: 16px;
            }
            li:hover{
                background-color:#FE5371;
            }
        }
    }
</style>